<template>
    <view>
        <div class="login-box">
            <nut-row style="margin: -35rpx 0 20rpx 0;">
                <nut-col :span="5">
                    <div :class="hasLogin ? 'flex-avatar' : 'flex-avatarno'">
                        <img style="width:120rpx;height: 120rpx;border-radius: 50%;"
                            @click="jumpTo('/packageA/pages/selfInfo/index')" :src="user.introduceSign || defaultImg" />
                    </div>
                </nut-col>
                <div class="flex-infor">
                    <nut-col :span="10" v-if="hasLogin">
                        <nut-row class="flex-a flex-b join" style="position: relative;">
                            <text class="nick">{{ user.nickName }}</text>
                            <nut-button size="mini" type="default" color="#F0A83F" @click="join">邀请</nut-button>
                        </nut-row>
                        <nut-row class="flex-infor flex-infor-id"><span class="flex-id-font flex-a">
                                <text>会员码：{{
                                    user.userNo }}</text> <img @click.stop="copy"
                                    src="https://cxj.szzkba.cn/upload/i/2024/09/19/143041_1.png"
                                    alt=""></span></nut-row>
                        <nut-row class="flex-id-font flex-a">
                            <text style="margin-left: 20rpx;color: #625F5F;">推荐官：{{ user.recName || '-' }}</text>
                        </nut-row>
                    </nut-col>
                    <nut-col :span="10" v-if="!hasLogin">
                        <nut-row class="flex-a">
                            <text class="nick none">暂未登录</text>
                        </nut-row>
                        <nut-row class="flex-infor flex-infor-id"><span class="flex-id-font flex-a">
                                <text style="margin-left: 10rpx;">登录享受更多优惠及服务</text> </span></nut-row>
                    </nut-col>
                    <nut-col :span="8" v-if="hasLogin">
                        <div class="flex-a" style="margin-left: 90rpx;">
                            <div class="money" @click="jumpTo('/packageA/pages/recharge/index')">
                                <div>{{ money }}<img src="https://cxj.szzkba.cn/upload/i/2024/11/04/153523.png" alt="">
                                </div>
                                <div>余额</div>
                            </div>
                            <div class="package">
                                <div>{{ point }}</div>
                                <div>积分</div>
                            </div>
                        </div>
                    </nut-col>
                    <nut-col :span="8" v-if="!hasLogin">
                        <nut-button style="margin-left: 90rpx;white-space: nowrap;" size="small" type="default"
                            color="#F0A83F" openType="getUserInfo" @getuserinfo="wxLogin">点击授权</nut-button>
                    </nut-col>
                </div>
            </nut-row>
            <!-- <div :class="user.role == '201' ? 'vip active' : 'vip'">
                <div class="flex-a flex-b">
                    <div>
                        <img src="https://cxj.szzkba.cn/upload/i/2024/09/19/144532_1.png" alt="">
                        <text v-if="user.role == '201'">分销白金会员</text>
                        <text v-else>开通&激活会员，立享特权</text>
                    </div>
                    <div @click="jumpTo('/packageA/pages/vip/index')">{{ user.role == '201' ? '立即续费' : '立即开通' }}
                        <Right color="#fff" size="12" />
                    </div>
                </div>
                <div class="flex-a flex-b limit" v-if="user.role == '201'">
                    <div>享全场9折优惠</div>
                    <div>有效期至：{{ user.fxTime }}</div>
                </div>
            </div> -->
        </div>
        <nut-popup position="bottom" :style="{ width: '100%', height: '32%' }" v-model:visible="joinBottom" closeable
            round class="join-box">
            <div class="share">
                <div @click="shareCode">分享会员码</div>
                <nut-button openType="share" type="info" size="small">分享小程序</nut-button>
                <div @click="joinBottom = false">取消</div>
            </div>
        </nut-popup>
        <nut-dialog title="会员码" v-model:visible="visible">
            <image style="width:200px;height: 200px;" :src="qrCode">
            </image>
            <!-- <canvas style="width: 200px; height: 200px;margin: 0 auto;" canvas-id="myQrcode"></canvas> -->
            <template #footer>
                <nut-button type="info" color="#8DCF00" size="small" @click="onCancel">关闭</nut-button>
                <nut-button openType="share" color="#8DCF00" type="info" size="small">去分享</nut-button>
            </template>
        </nut-dialog>
        <div v-if="show" class="diy-dialog">
            <div class="box">
                <div class="head">陈香会集用户协议</div>
                <div class="title">
                    <div>尊敬的客户，在您下载陈香会集程序（下称“APP”）使用我们的服务前，请仔细阅读本用户协议。</div>
                    <div>
                        本协议是您与“陈香会集”及其关联方（以下统称“我们”）签署的《用户协议》。您通过下载本APP或其他渠道成功注册并使用本APP，即被视为您已阅读、理解、接受本协议的全部条款。本协议以及上述相关协议所涉内容可由我们不时作出修订，修订后的内容一旦以任何形式在本APP上公布即生效，并取代此前的内容。您知悉并确认，如您不同意本协议及相关协议或其修订版本，则应立即停止使用本APP；如您继续使用，则视为您同意接受相关条款及其修订内容。
                    </div>

                    <div>如果您不满十八（18）周岁，您应与您的父母或监护人共同阅读本协议，确保您及您的父母或监护人理解并同意本协议的内容。</div>

                    <div>1. 用户许可</div>
                    <div>1. 1. 我们允许您在本协议范围内享有个人的、非排他性的、不可转让的使用本APP的权利。但是您不得有以下行为：</div>
                    <div>1. 1.1. 以任何方式出售、转让、分发、修改或传播APP或与APP有关的文字、图片、音乐、条形码、视频、数据、超链接、展示及其他内容（“内容”）；</div>


                    <div>1. 1. 2. 储存或发布淫秽、诽谤、暴力、侵犯他人权利等其他非法资料或信息；</div>

                    <div>1. 1. 3. 储存或发送包含软件病毒或其他有害的计算机的程序资料；</div>

                    <div>1. 1. 4. 利用服务或APP程序进行违法犯罪活动；</div>

                    <div>1. 1. 5. 利用服务或APP程序侵犯他人合法权益；</div>

                    <div>1. 1. 6. 利用服务或APP程序影响网络的正常运行；</div>

                    <div>1. 1. 7. 损害APP程序数据的完整性或性能。</div>

                    <div>本用户许可同样适用于本APP的任何更新、补充或替代产品，但相关更新、补充或替代产品中有相反规定的除外。</div>

                    <div>1. 2. 如果我们发现您存在任何违反本协议的行为或存在其他损害APP的行为，我们保留在不另行通知的情况下随时禁止您继续使用APP和相关服务的权利。</div>

                    <div>2. 注册帐号、密码及安全性</div>
                    <div>2. 1. 注册资格您承诺：您具有完全民事权利能力和行为能力或虽不具有完全民事权利能力和行为能力但经您的法定代理人同意并由其代理注册APP服务。</div>

                    <div>2.
                        2.注册流程：您同意根据APP注册页面的要求提供手机号码并通过认证程序注册账号，或者通过微信授权快速注册账号。您确保注册账户使用的手机号码或微信账户系您个人有权使用的手机号码或微信账户，您将对账户安全负全部责任。另外，每个用户都要对以其用户名进行的所有活动和事件负全责。
                    </div>

                    <div>2. 3. 您成功注册后，您同意接收我们发送的与APP管理、运营相关的微信订阅号和／或客户端消息和／或电子邮件和／或短消息。</div>

                    <div>2. 4.
                        注册成功后，您有权根据APP相关页面公示的服务规则获取陈香会集的相关信息、发送订单、授权我们通过您指定的账户划扣服务费用并享受本APP中的优惠券、不时发生的促销活动等其他相关服务。
                    </div>

                    <div>2.
                        5.您务必保管好您的用户账户、密码。账户因您保管不善或被他人使用、冒用、盗用所产生的相关责任我们不承担责任，你应当通过司法、行政等救济途径向侵权行为人追偿。除我们存在过错的，您应对您账户项下的所有行为（包括但不限于在线签署各类协议、发布信息、购买商品及服务及披露信息等）承担责任。
                    </div>

                    <div>2.
                        6.企业可以申请、注册陈香会集企业账户，企业账户指定人员可在购买我们产品或服务后使用该企业账户进行结算。企业账户有权任意指定并授权企业账户的管理人员，该管理人员可以通过企业账户自主添加享受企业用户服务的个人。开通企业账户的企业，应妥善保存好账户及密码，企业应对该账户安全负责，并对该账户发出的所有指令承担全部责任。
                    </div>

                    <div>2. 7. 您有权对您注册的用户信息进行查询、更正、删除。若因您提供的信息错误，导致我们提供的服务发生错误，造成的损失由您自行承担。</div>

                    <div>2. 8. 您若发现任何非法使用用户帐号或存在安全漏洞的情况，请立即反馈给我们。</div>

                    <div>3. 用户信息保护</div>
                    <div>3. 1.
                        您同意向APP提供某些信息包括但不限于身份识别信息、平台操作信息、位置及收货地址信息、支付信息、个人信用信息以及其他根据我们的产品服务需要而收集的您的个人信息（“用户信息”）。
                    </div>

                    <div>3. 2. 您同意向我们传输用户信息，并授权我们在APP功能所需的范围内以本协议所述的目的记录、处理及存储上述用户信息。</div>

                    <div>3. 3. 我们通过以下方式收集、分享、使用您的用户信息:</div>

                    <div>3. 3.
                        1.为了向您提供更加便捷、人性化的服务，我们可能需要您提供一些个人信息，包括：姓名／企业名称、实时位置、地址、电话号码等个人资料。为了保证您能够享受更好的服务，您需要及时更新上述注册资料，否则我们可能因为您资料不准确而无法提供服务。
                    </div>

                    <div>3. 3. 2. 如果您将APP与您在第三方支付平台的账户关联，您需要授权我们通过您指定的账户划扣服务费。</div>

                    <div>3. 3. 3. 为了向您提供更便捷的售前服务（如查询附近门店）以及售后服务等，APP将会使用、保存您的位置信息、交易信息、操作信息等。</div>

                    <div>3. 3. 4. 为了改进服务质量，我们会向您征集反馈意见，包括您参与的问卷调查、在线意见反馈、客服投诉等。</div>

                    <div>3. 3. 5. 以其他必要方式收集用户信息。</div>

                    <div>3.
                        4.您应遵循诚实信用、合法善意的原则，向陈香会集提交相关注册资料，不应提交任何违法或不良信息。相关资料如有变动，您应及时更新。如因您提供的注册资料不合法、不真实、不准确或未及时更新，从而导致的相关法律责任或不利后果由您自行承担。您已知悉，因安全性、内部管理等原因，部分注册资料（如电话号码）可能将无法再次更改。因此，您应谨慎核查此部分注册资料，确保正确填写。
                    </div>

                    <div>3. 5. 我们将采取技术措施和其他必要措施，确保用户信息安全，防止在本服务中收集的用户信息泄露。在发生前述情形或我们发现存在发生前述情形的可能时将及时采取措施补救。</div>

                    <div>3. 6. 我们承诺未经过您的同意不将您的个人信息任意披露。但在以下情形下，我们将无法作出前述保证并披露您的相关信息。这些情形包括但不限于：</div>

                    <div>3. 6. 1. 为了您的服务、交易顺利完成，您同意我们把您的某些用户信息，如您的姓名、电话、配送地址等提供给相关服务方，以便于他们及时与您取得联系，提供服务；</div>

                    <div>3. 6. 2. 当您在APP的行为违反服务条款，或可能损害他人权益或导致他人遭受损害，只要我们相信披露您的用户信息是为了辨识、联络或采取法律行动所必要的行动时；</div>

                    <div>3. 6. 3. 根据法律法规规定必须披露或公开的用户信息；</div>

                    <div>3. 6. 4. 有权机关依法执行公务，要求提供特定用户信息；</div>

                    <div>3. 6. 5. 您与我们及合作单位之间就用户信息的使用公开达成约定，我们因此向合作单位公开用户信息；</div>

                    <div>3. 6. 6. 任何由于黑客攻击电脑病毒侵入或其他不可抗力事件导致用户信息的泄露。</div>

                    <div>3. 7 您同意我们在以下事项中使用用户信息：</div>

                    <div>3. 7. 1. 向您及时发送重要的通知，如软件更新、本协议条款的变更；</div>

                    <div>3. 7. 2. 进行审计数据分析和研究等，以改进产品服务及与用户之间的沟通；</div>

                    <div>3. 7. 3. 依照本协议约定，我们管理、审查用户信息及采取处理的措施；</div>

                    <div>3. 7. 4. 为了保护您或他人的生命、财产等重大合法权益，但又难以获得您的事先同意时；</div>

                    <div>3. 7. 5. 出于维护国家安全、国防安全、公共安全、公共卫生、重大公共利益有关的目的；</div>

                    <div>3. 7. 6. 适用法律法规规定的其他事项。</div>

                    <div>除上述事项外，未取得您事先同意，我们不会将用户信息用于其他任何用途。</div>

                    <div>4. 用户权益</div>
                    <div> 4. 1. 我们为用户提供包括订单查询、下单交易、评价、评论、参加促销活动等服务。服务项目和内容可能不时调整，并可能根据用户类别、使用权限等因素存在一定差异。</div>

                    <div>4.
                        2.您有权通过正当途径获得账户优惠。若您通过不正当的手段获得或利用账户优惠，我们将作出合理判断及措施，采取的措施包括但不限于取消、收回您的账户优惠直至冻结您的账户使用、终止本服务等。如您的不当使用造成我方损失，我们还有权向您进行追偿。
                    </div>

                    <div>4. 3. 我们为您提供线上（APP）下单门店自提、线上（APP）下单外卖配送的两种方式为您提供服务。</div>

                    <div>4. 3.
                        1.当您使用线上（APP）下单门店自提的服务方式时，通常情况下我们会根据您的手机定位信息默认选择离您最近的服务门店提供服务，但不排除因设备、技术、门店距离冲突等原因以及您的个人意向导致系统默认选择的门店不是您所意向取货的门店，所以请您务必对自提门店进行确认，否则因门店错误导致无法为您及时提供服务的责任由您自行承担。
                    </div>

                    <div>4. 3.
                        2.当您使用线上（APP）下单外卖配送的服务时，请务必确认您所填写的收件人信息（包括送货地址、联系电话）的准确性及通讯方式的畅通，以便我们的配送合作商能够准确及时的向您配送商品，如因您提供的电话无法接通或送达地址错误，致使我们没有办法向您完成或及时完成服务，该责任由您自行承担。
                    </div>

                    <div>4. 3.
                        3.通常情况下，我们会委托第三方配送合作商向您配送商品，我们会根据经营成本控制对订单配送费用进行调整，具体配送金额以您确认订单上显示的配送费价格为准，您对此表示知情并同意。根据我们与配送合作商之间签订的协议，配送合作商在提供服务过程中对您的权力造成损害的，该责任由配送合作商承担。如配送合作商的配送服务及人员对您造成权益侵犯，我们将协助配合您进行处理。
                    </div>

                    <div>5. 责任</div>
                    <div>5. 1.</div>
                    <div>
                        在您下订单时，请您仔细确认所购商品的名称、价格、数量、联系地址、电话、收货人等信息。收货人与您本人不一致的，您应确保您已获得该收件人的授权同意，收货人的行为和意思表示视为您的行为和意思表示，您应对收货人的行为及意思表示的法律后果承担连带责任。
                    </div>

                    <div>5.
                        2.我们向您提供的预订信息仅供您参考，并不构成保证。我们将在合理的范围内尽力保证该等信息准确，但无法保证其中没有任何错误。由于APP的功能受到客观技术条件的影响，您理解并同意，APP在其使用过程中发生暂时中断是正常的现象。我们不能保证APP的功能不会发生中断或不出现差错，也不能保证提供APP的网站或服务器不存在病毒或其他有害成分。
                    </div>

                    <div>5. 3. 您通过APP请求的产品和服务质量由我们负责控制和监督。</div>

                    <div>5. 4. 我们将不承担任何基于不可抗力等非人为因素给您造成的损失。不可抗力包括但不限于：</div>

                    <div>5. 4. 1. 大雾、雷雨、沙尘、道路积雪、结冰、低能见度等危及行车安全的恶劣气象条件；</div>

                    <div>5. 4. 2. 洪涝、台风、冰雹、暴雪、地震、山体崩塌、滑坡、泥石流、海啸等自然灾害；</div>

                    <div>5. 4. 3. 公安机关交通管理部门在集会游行、大型运动会、道路桥梁建设、救灾抢险等情形下实施的交通管制等措施；</div>

                    <div>5. 4. 4. 黑客攻击、电信部门技术调整导致之重大影响、因政府管制而造成之暂时关闭、病毒侵袭等事件。</div>

                    <div>5. 5 我们对于您的以下行为引起的直接、间接、偶然及继起的损害不负责任：</div>

                    <div>5. 5. 1. 不正当使用服务；</div>

                    <div>5. 5. 2. 故意隐瞒重要信息；</div>

                    <div>5. 5. 3. 传送的信息不符合规定等。</div>

                    <div>5.
                        6.因您使用或不当使用APP、违反本协议条款或侵犯第三方的任何权利所引起的任何及所有索赔、诉讼、损害、费用、法律诉讼、罚款、罚金、责任和开支（包括律师费用），您同意为陈香会集及其雇员、合作商、管理人员和董事进行抗辩、向其作出赔偿并使其免受损失。对于我们用户赔偿的任何事项，我们保留独家抗辩权和控制权，在此情况下，用户应配合我们向相关第三方主张任何可行的抗辩。
                    </div>

                    <div>5. 7. 在适用法律允许的最大范围内，在任何情况下， (A)我们均不就APP的使用对用户承担责任；
                        且(B)不就任何间接的、特殊的、偶然的、附随的或惩罚性的损害对您承担责任，包括但不限于商誉损失、利润损失、用户信息丢失、失窃或受损、无法使用APP、或者设备故障或失灵所导致的损害。您享有的救济途径为停止使用APP或注销账户。
                    </div>

                    <div>6. 知识产权</div>
                    <div>6.
                        1.陈香会集标识以及与APP相关的其他陈香会集商标、服务标志、图像和标识均为陈香会集的商标或注册商标（统称“陈香会集标志＂）。与APP相关的其他商标、服务标志、图像和标识为其各自所有人的商标（统称“第三方标志”）。未经陈香会集或相关商标持有人的事先书面许可，用户不得全部或部分地复制、模仿或使用陈香会集标志或第三方标志。APP和内容受到与著作权、商标、专利、商业秘密及其他专有权利相关的国际条约、法律、法规、行政规章等规定的保护，您可在我们或内容所有人授权的情况下使用包含保护数字信息的安全组件。
                    </div>

                    <div>6.
                        2.您一旦接受本协议，即表明您主动将您在任何时间段在本APP发表的任何形式的信息内容的财产性权利等任何可转让的权利，如著作权财产权（包括并不限于：复制权、发行权、出租权、展览权、表演权、放映权、广播权、信息网络传播权、摄制权、改编权、翻译权、汇编权以及应当由著作权人享有的其他可转让权利），全部独家且不可撤销地转让给瑞幸所有，并且您同意瑞幸有权就任何主体侵权而单独提起诉讼。
                    </div>

                    <div>7. 合约期限及变更、终止</div>
                    <div>7. 1. 我们和您订立的这份协议是无固定期限协议。</div>

                    <div>7. 2. 您有权在结清全部应付费用后，随时通过注销APP账户来终止本协议。</div>

                    <div>7. 3, 如因您违反本协议约定，您的账户被使用的，本协议于您账户禁用之日终止。</div>

                    <div>8. 其他</div>
                    <div>8. 1. 本用户协议部分条款或附件无效或终止的，我们有权根据具体情况选择是否继续履行其他条款。</div>

                    <div>8. 2. 本协议适用中国大陆地区法律。因使用本APP或本协议履行中发生的任何争议，由被告所在地人民法院管辖。</div>

                    <div>本版本发布时间：2023年09月05日</div>


                </div>
                <div class="foot">
                    <nut-button type="default" size="small" @click="show = false">关闭</nut-button>
                    <nut-button type="default" size="small" color="#1890FF" openType="getPhoneNumber"
                        @getphonenumber="wxLogin">同意协议并注册</nut-button>
                </div>
            </div>
        </div>
    </view>
</template>

<script lang="ts">
// import drawQrcode from 'weapp-qrcode'
import { ref, reactive, toRefs, onMounted } from 'vue';
import mitt from "../../../utils/mitt";
import { Grid, GridItem, Dialog } from '@nutui/nutui';
import { Right } from '@nutui/icons-vue-taro';
import Taro, { useShareAppMessage, useRouter } from '@tarojs/taro'
import { login, getImgCash, getRecharge } from '../../../../api/index'
import '@nutui/nutui/dist/packages/dialog/style';
export default {
    components: {
        'nut-grid': Grid,
        'nut-grid-item': GridItem,
        'nut-dialog': Dialog,
        Right
    },
    setup() {
        useShareAppMessage((res) => {
            var user = Taro.getStorageSync('user')
            if (res.from === 'button') {
                // 来自页面内转发按钮
                //console.log(res.target)
            }
            return {
                title: user.nickName + '分享的会员码',
                path: '/pages/index/index?userId=' + user.userId,
                imageUrl: user.url + ''
            }
        })
        const visible = ref(false);
        const qrCode = ref('');
        const hasLogin = ref(false)
        const hasRegister = ref(true)
        const show = ref(false)
        const onCancel = () => {
            visible.value = false
        };
        const onOk = () => {
            //console.log('event ok');
        };
        const tipsClick = () => {
            getImgCash().then(res => {
                if (res.resultCode == 200) {
                    qrCode.value = res.message
                }
            })
            visible.value = true;
        };
        const state = reactive({
            user: {},
            money: 0,
            point: 0,
            defaultImg: 'https://cxj.szzkba.cn/upload/i/2024/08/02/151232.png',
            joinBottom: false
        });
        onMounted(() => {
            const router = useRouter();
            //console.log(router.params.goodsId)
            Taro.getStorage({
                key: 'user',
                success: function (res) {
                    //console.log(res.data)
                    hasLogin.value = res.data ? true : false
                    state.user = res.data ? res.data : {}
                    if (res.data) {
                        getPoint()
                    }
                }
            })
            mitt.on("hasLogin", (val) => {
                hasLogin.value = val
            })
        });
        const shareCode = () => {
            getImgCash().then(res => {
                if (res.resultCode == 200) {
                    qrCode.value = res.message
                }
            })
            visible.value = true;
        }
        const copy = () => {
            Taro.setClipboardData({
                data: state.user.userNo,
                success: function (res) {
                    Taro.getClipboardData({
                        success: function (res) {
                            Taro.showToast({
                                title: '已复制',
                                icon: 'success',
                                duration: 2000
                            })
                        }
                    })
                }
            })
        }
        const wxLogin = (e) => {
            let phonecode = e.detail.code;
            Taro.showLoading({
                title: '登录中',
            })
            Taro.login({
                success: function (response) {
                    if (response.code) {
                        Taro.getUserInfo({
                            success: function (res) {
                                var userInfo = res.userInfo
                                var nickName = userInfo.nickName
                                login({ nickName: nickName, encryptedData: res.encryptedData, userId: Taro.getStorageSync('userId') || null, iv: res.iv, code: response.code, phonecode: phonecode }).then(respon => {
                                    if (respon.resultCode == 200) {
                                        let token = respon.data.token
                                        let user = respon.data.user
                                        Taro.setStorage({
                                            key: "token",
                                            data: token
                                        })
                                        Taro.setStorage({
                                            key: "user",
                                            data: user
                                        })
                                        hasLogin.value = true
                                        show.value = false
                                        state.user = user
                                        Taro.hideLoading()
                                        getPoint('', token)
                                        const router = useRouter();
                                        if (router.params.goodsId) {
                                            Taro.navigateTo({ url: router.params.userId ? '/packageA/pages/productDetail/index?goodsId=' + router.params.goodsId + '&userId=' + router.params.userId : '/packageA/pages/productDetail/index?goodsId=' + router.params.goodsId })
                                        } else if (router.params.scene) {
                                            Taro.navigateTo({ url: router.params.userId ? '/packageA/pages/productDetail/index?goodsId=' + router.params.scene.split('%26')[0].split('%3D')[1] + '&userId=' + router.params.userId : '/packageA/pages/productDetail/index?goodsId=' + router.params.scene.split('%26')[0].split('%3D')[1] })
                                        } else {
                                            Taro.navigateTo({ url: '/packageA/pages/mypage/index?name=myPage' })
                                        }
                                    } else if (respon.resultCode == 500 && respon.message == '登录失败，未注册！') {
                                        hasRegister.value = false
                                        Taro.hideLoading()
                                        show.value = true
                                    }
                                })
                            }
                        })

                    } else {
                        //console.log('登录失败！')
                    }
                }
            })
        }
        const jumpTo = (path) => {
            Taro.navigateTo({ url: path })
        }
        const getPoint = (data, token) => {
            getRecharge(data, token).then(res => {
                if (res.resultCode == 200) {
                    state.money = res.data.recharge
                    state.point = res.data.integral
                    Taro.removeStorage({
                        key: 'userId',
                        success: function (res) {
                            //console.log(res)
                        }
                    })
                }
            })
        }
        const join = () => {
            state.joinBottom = true
        }
        return {
            visible,
            qrCode,
            join,
            tipsClick,
            onCancel,
            onOk,
            wxLogin,
            hasLogin,
            jumpTo,
            hasRegister,
            show,
            getPoint,
            copy,
            shareCode,
            ...toRefs(state)
        };
    }
};
</script>

<style lang="scss">
.login-box {
    background: #F2F8FE;
    box-shadow: 0 0 10rpx 10rpx #F2F8FE;
}

.package {
    font-size: 26rpx;
    text-align: center;

    div {
        white-space: nowrap;
    }

    div:first-child {
        margin-bottom: 10rpx;
    }
}

.money {
    margin-right: 40rpx;
    font-size: 26rpx;
    text-align: center;

    div {
        white-space: nowrap;
    }

    div:first-child {
        margin-bottom: 10rpx;
        position: relative;
    }

    img {
        width: 28rpx;
        height: 32rpx;
        position: absolute;
        right: -30rpx;
        top: -20rpx;
    }
}

.vip.active {
    height: 120rpx;
}

.vip {
    width: 92%;
    margin: 0 auto;
    height: 100rpx;
    background: url('https://cxj.szzkba.cn/upload/i/2024/09/19/144532.png')no-repeat 0 0;
    background-size: 100% 100%;
    color: #fff;
    padding: 20rpx 20rpx 0;
    box-sizing: border-box;
    font-size: 26rpx;

    img {
        width: 30rpx;
        height: 30rpx;
        margin-right: 20rpx;
    }
}

.limit {
    font-size: 20rpx;
    color: #fff;
    padding: 0 20rpx 0 50rpx;
    box-sizing: border-box;
    margin-top: 6rpx;
}

.nut-row {
    overflow: hidden;

}

.flex-avatar {
    margin-top: 75%;
    // margin-top: 60%;
    margin-left: 25%;
}

.flex-avatarno {
    margin-top: 58%;
    margin-left: 25%;
}

.flex-infor {
    margin-top: 15%;
    margin-bottom: 5%;

    .nick.none {
        margin-left: 10rpx;
        font-size: 26rpx;
    }

    .nick {
        margin-left: 20rpx;
    }

    &.flex-infor-id {
        margin-top: 5%;
    }

    .join {
        .nut-button {
            padding: 0 15rpx;
            font-size: 20rpx;
            height: 36rpx;
            position: absolute;
            right: 0;
        }
    }
}

.flex-id-font {
    font-size: 20px;
    white-space: nowrap;

    img {
        width: 20rpx;
        height: 20rpx;
    }

    img:first-child {
        margin: 0 10rpx 0 20rpx;
    }

    text {
        margin: 0 10rpx 0 20rpx;
        display: inline-block;
        width: 200rpx;
        white-space: nowrap;
    }
}

.flex-membercode {
    margin-left: 40%;
}

.flex-member-infor {
    margin: 5% auto 0;
    width: 90%;
    align-items: center;
}

.flex-member-details {
    margin-top: 20px;
    display: flex;
    align-items: center;

    &.flex-member-details-font {
        font-size: 36px;
        font-weight: bold;
    }

    &.flex-member-details-fontcolor {
        color: #8a8a8a;
    }

    &.flex-member-details-titlefont {
        font-size: 30px;
    }
}

.diy-dialog {
    position: absolute;
    top: -10%;
    width: 100%;
    height: 100vh;
    overflow: hidden;
    z-index: 99;
    background-color: rgba($color: #000, $alpha: 0.3);

    .box {
        width: 80%;
        position: absolute;
        top: 50%;
        left: 50%;
        background: #fff;
        transform: translate(-50%, -50%);
        border-radius: 20rpx;

        .head {
            text-align: center;
            font-size: 30rpx;
            color: #000;
            padding: 20rpx 0 10rpx;
            font-weight: bold;
        }

        .title {
            height: 800rpx;
            overflow-y: auto;
            text-align: justify;
            padding: 20rpx 50rpx 40rpx;
            color: #808080;
            box-sizing: border-box;
            font-size: 24rpx;
            line-height: 36rpx;
            margin-bottom: 30rpx;
        }

        .foot {
            text-align: center;
            padding: 20rpx 0 20rpx;
            border-top: 1rpx solid #F0F0F0;

            .nut-button:last-child {
                margin-left: 30rpx;
            }

            .nut-button {
                width: 240rpx;
                height: 60rpx;
                white-space: nowrap;
                font-weight: bold;
            }

            .nut-button:first-child {
                color: #808080;
            }
        }
    }
}

.join-box {

    div.share {
        padding: 100rpx 0 0;
        box-sizing: border-box;
        text-align: center;

        div {
            padding: 20rpx 0;
            border-bottom: 1rpx solid #FAFAFA;
        }

        div:last-child {
            border-top: 8rpx solid #F7F7F7;
            border-bottom: none;
        }

        .nut-button {
            background: transparent !important;
            border: none !important;
            color: #333;
            font-size: 30rpx;
            margin: 10rpx 0;
        }
    }
}
</style>